<template>
    <view class="content">
        <view class="address">
            <view>
                <view>源小茶天府新谷店></view>
                <view>
                    <image class="map" src="/static/dw.png"></image>
                    <text>距离您100m</text>
                </view>
            </view>
            <image class="img" src="/static/logo1.png" mode=""></image>
        </view>
        <custom-swiper :image-list="imageList" hpx="170px"></custom-swiper>

        <view class="product">
            <view>
                <!-- key 唯一 -->
                <!-- 当前选择项的索引等于当前循环的索引 就高亮显示 -->
                <!-- {{tabList}} -->
                <view @click="handleTab(i)" :class="currentIndex === i ? 'active' : ''" v-for="(item, i) in tabList"
                    :key="i">
                    {{ item.typename }}
                </view>

            </view>
            <view>{{ tabList[currentIndex].typename }}
                <view v-for="(item, i) in productList" :key="i">
                    <view>{{ item.pname }}</view>
                    <view>价格：{{ item.tprice }}</view>
                    <view><button @click="addCart(item)">加入购物车</button></view>
                </view>

            </view>
        </view>
    </view>
</template>

<script>
// 导入接口
import { get_list } from "@/apis/type.js"
import { query_by_id, query_by_type_id } from "@/apis/product"

export default {
    data() {
        return {
            imageList: [],
            currentIndex: 0,
            tabList: [{

            }],
            productList: []

        }
    },
    onLoad(option) {
        // console.log()
    },
    onShow() {
        this.getList()
    },
    methods: {
        addCart(value) {
            uni.getStorage({ key: "cart" })
                .then(res => {
                    let cart = res.data;
                    console.log(cart);
                    let found = cart.find(i => i.id === value.id);
                    if (!found) {
                        uni.getStorage({ key: "userInfo" })
                            .then(res => {
                                console.log(cart);
                                let userId = res.data.id;
                                cart.push({
                                    id: value.id,
                                    pnum: 1,
                                    pname: value.pname,
                                    typeid: value.typeid,
                                    tprice: value.tprice,
                                    checked: false,
                                    userId: userId
                                });
                                uni.setStorage({
                                    key: "cart",
                                    data: cart
                                });
                            })
                            .catch(() => {
                                uni.navigateTo({ url: "/pages/login/index" })
                            });
                    } else {
                        cart.forEach(i => {
                            if (i.id === value.id) {
                                i.pnum += 1;
                            }
                        })
                    }
                })
                .catch(() => {
                    uni.getStorage({ key: "userInfo" })
                        .then(res => {
                            let userId = res.data.id;
                            let cart = [{
                                id: value.id,
                                pnum: 1,
                                pname: value.pname,
                                typeid: value.typeid,
                                tprice: value.tprice,
                                checked: false,
                                userId: userId
                            }];
                            uni.setStorage({
                                key: "cart",
                                data: cart
                            })
                        });
                });
        },
        getList() {
            uni.request({
                url: "http://localhost:8888/image/queryByIType?itype=3",
                success: (reseponse) => {
                    console.log(reseponse)
                    //获取后端传过来的数据
                    this.imageList = reseponse.data.data
                },
                fail: (err) => { console.log(err) }
            })

            get_list()
                .then(res => {
                    this.tabList = res.data
                    if (this.tabList.length != 0) {
                        this.getOrderList(this.tabList[0].id)
                    }
                })
                .catch(err => {
                    console.log(err);
                })
        },
        getOrderList(id) {
            query_by_type_id(id).then(res => {
                this.productList = res.data
            }).catch(() => { });
        },
        handleTab(i) {
            //将当前的索引进行赋值
            this.currentIndex = i

            this.getOrderList(this.tabList[i].id)
        }
    }
}
</script>
<style scoped>
.address {
    padding: 50rpx 15rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.map {
    width: 50rpx;
    height: 50rpx;
}

.img {
    width: 260rpx;
    height: 130rpx;
}

/* css3选择器 */
.address>view:nth-child(1)>view:nth-child(1) {
    color: orange;
    font-weight: bold;
    font-size: 37rpx;
}

.product {
    display: flex;
    justify-content: space-between;
}

.product>view:nth-child(1) {
    width: 200rpx;

}

.product>view:nth-child(1)>view {
    /* width: 100%; */
    /* 占位 */
    /* border: 1px solid red; */
    height: 200rpx;
    line-height: 200rpx;
    text-align: center;

    background: #f5f5f5;
    color: #999;
}

/* 权重 */
.active {
    /* 提权 important代表在本页面权重最高 在页面中有多个生效的important，会执行最后*/
    /* css样式执行规则 从上往下执行 执行之后一个样式 */
    color: orange !important;
    font-weight: bold !important;
    background: #fff !important;
}

.product>view:nth-child(2) {
    width: 530rpx;
    margin-right: 10rpx;
}

.product>view:nth-child(2)>view {
    margin-top: 10rpx;
    box-shadow: 0 0 5rpx #ccc;
    padding: 10rpx;

    width: 100%;
    /* 将边框和内边距不计入盒模型计算 */
    box-sizing: border-box;
}
</style>
